<template>
  <div class="content">
    <div class="title">
      <h2>{{info.acName}}</h2> <Button @click="backClick">返回</Button>
    </div>

    <Tabs :value="sourceType" type="card" @on-click='tabClick'>
      <TabPane label="活动信息" name="1">
        <dt-info v-if="sourceType==1" :label-width="150" ref='info1' :options='options'
          :info="info" style="width: 100%;">
        </dt-info>
      </TabPane>
      <TabPane label="授权用户" name="2">

      </TabPane>
      <TabPane label="中奖信息" name="3"></TabPane>
    </Tabs>

    <dt-search ref="search" :labelWidth="100" v-if="sourceType!='1'" @reset="onReset">
      <Button type="primary" @click="exportData">导出</Button>
    </dt-search>

    <dt-grid ref="table" :columns="columns" :page='page' :onFetch='onFetch' :height='550' />

    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }"
      :footer-hide="true" @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>

  </div>
</template>

<script>
  import infoMgr from './opt/info.js'
  import columnOpt from './opt/column.js'
  import searchOpt from './opt/search.js'
  import activityMgr from '@/biz/activity/activity'

  // import detailPage from '../casemanagement/allCustomersManagement/details.vue'
  import detailPage from '../../../../casemanagement/allCustomersManagement/details.vue'

  import dt from '@dt/dt'
  export default {

    data() {
      return {
        detailsFlag: false,
        options: null,
        sourceType: '1',
        housesId: dt.buildInfo().housesId,
        acId: this.$route.query.acId,
        page: {
          total: 0,
          current: 1
        },

        columns: [],
        searchVal: {
          phoneNo: '',
          time: ''
        },
        info: {}

      }
    },
    components: {
      detailPage

    },
    mounted() {
      this.options = infoMgr.options(this)
      // this.$refs.info1.init(this.options, this.info)


      this.$refs.table.init(this)
      this.$refs.table.fetch()

    },
    methods: {
      markCancel() {
        this.detailsFlag = false
      },
      getDetail(row) {
        // if (rows.hasCustomer) {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     hasAttention: true,
        //     customerId: row.customerId,
        //     userCustomerId: row.bindingUserCustomerId?row.bindingUserCustomerId:row.userCustomerId,
        //     buildingId: this.$dt.buildInfo().housesId,
        //     // userId: row.userId,
        //     // cityCode: row.cityId,
        //   }      
        // } else {
        //   this.detailsFlag = true
        //   this.detailsParams = {
        //     flag: 'clue',
        //     customerId: row.customerId,
        //     userCustomerId: rows.bindingUserCustomerId?rows.bindingUserCustomerId:rows.userCustomerId,
        //     buildingId: this.$dt.buildInfo().housesId,
        //     // userId: row.userId,
        //     // cityCode: row.cityId
        //   }
        // }
        // // 判断线索客户 还是案场客户
        if (row.hereto == '1') {
          this.detailsFlag = true
          this.detailsParams = {
            flag: 'clue',
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            buildingId: this.$dt.buildInfo().housesId,
            // userId: row.userId,
            // cityCode: row.cityId
          }
        } else {
          this.detailsFlag = true
          this.detailsParams = {
            hasAttention: true,
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            buildingId: this.$dt.buildInfo().housesId,
            // userId: row.userId,
            // cityCode: row.cityId,
          }
        }
      },
      exportData() {
        if (this.sourceType == '2') {
          activityMgr.acActivityCustomerExport(this.params)
        } else if (this.sourceType == '3') {
          activityMgr.exportLotteryMsgList(this.params)
        }
      },


      backClick() {
        this.$router.push({
          path: '/marketingCenter/activityManagement/activity',
        })
      },

      tabClick(val) {
        this.searchVal = {
            phoneNo: '',
            time: ''
          },
          this.sourceType = val

        if (val == '1') {
          this.columns = columnOpt.options1(this)
          this.$refs.table.init(this)
          this.$refs.table.fetch()

        } else if (val == '2') {
          setTimeout(() => {
            this.columns = columnOpt.options2(this)
            this.$refs.search.init(this.$refs.table, searchOpt.options(this, '2'), this
              .searchVal)
            this.$refs.table.init(this)
            this.$refs.table.fetch()
          }, 1)

        } else {
          setTimeout(() => {
            this.$refs.search.init(this.$refs.table, searchOpt.options(this, '3'), this
              .searchVal)
            this.columns = columnOpt.options3(this)
            this.$refs.table.init(this)
            this.$refs.table.fetch()
          }, 1)

        }


      },


      // 清空筛选条件
      onReset() {
        this.$refs.table.fetch()
      },
      // 列表数据
      onFetch(data) {
        if (this.sourceType == '1') {
          this.columns = columnOpt.options1(this)

          this.params = data
          this.params.acId = this.acId
          // this.params.housesId = this.housesId


          return activityMgr.activitySummary(this.params).then(res => {
            this.page.total = 0
            res.list = res.lotteryMsg
            this.info = res
            return res
          })
        } else if (this.sourceType == '2') {
          this.columns = columnOpt.options2(this)

          this.params = data
          this.params.acId = this.acId
          this.params.housesId = this.housesId

          return activityMgr.acActivityCustomerPage(this.params).then(res => {
            this.page.total = res.total
            res.list = res.list
            return res
          })
        } else if (this.sourceType == '3') {
          this.columns = columnOpt.options3(this)

          this.params = data
          this.params.acId = this.acId
          this.params.lotteryStartTime = data.time && data.time[0]
          this.params.lotteryEndTime = data.time && data.time[1]

          return activityMgr.lotteryMsgList(this.params).then(res => {
            this.page.total = res.total
            res.list = res.list
            return res
          })
        }


      },


    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;

    .title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 15px;
    }
  }
</style>